<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header('组织架构')"></head>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
    body {
        height: auto;
        font-family: "Microsoft YaHei";
    }

    button {
        font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
    }
</style>
<body class="hold-transition box box-main">
<input id="treeId" name="treeId" type="hidden" th:value="${dept.deptId}"/>
<input id="treeName" name="treeName" type="hidden" th:value="${dept.deptName}"/>
<input id="userName" name="userName" type="hidden"/>
<div class="wrapper" id="userTree">
    <div class="row">
        <div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
            <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
            <label id="btnHide" title="隐藏搜索">︽</label>
        </div>
        <div class="treeSearchInput" id="search">
            <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
            <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索</button>
        </div>
    </div>
    <div class="row">
        <div class="treeExpandCollapse">
            <a href="#" onclick="$.tree.expand()">展开</a> /
            <a href="#" onclick="$.tree.collapse()">折叠</a>
        </div>
        <div id="tree" class="ztree treeselect"></div>
        <div class="form-group">
            <label class="col-sm-3 control-label">接收人：</label>
            <div class="col-sm-8">
                <label class="check-box" v-for="user in users">
                    <input type="checkbox" name="userId" :value="user.userId" checked><span>{{user.userName}}</span>
                    <!--<input name="userId" type="checkbox" th:value="${user.userId}" th:text="${user.userName}" th:disabled="${user.status == '1'}">-->
                </label>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);
    });
    var userTree = new Vue({
        el: '#userTree',
        data: {
            users: ''
        },
        methods: {
            selectUserList: function (deptId) {
                var deptId = $.common.isEmpty(deptId) ? "100" : $("#treeId").val();
                $.getJSON('/system/user/selectUserByDeptId/' + deptId, function (data) {
                    userTree.users = data;
                });
            }
        },
        created: function () {
            this.selectUserList("100");
        }
    });

    function zOnClick(event, treeId, treeNode) {
        var treeId = treeNode.id;
        var treeName = treeNode.name;
        $("#treeId").val(treeId);
        $("#treeName").val(treeName);
        userTree.selectUserList(treeId);
    }
</script>
</body>
</html>
